<template>
  <div class="module-box" style="background-color: rgb(242, 246, 252);">
    <h4 class="module-title">品牌推荐</h4>
    <el-row :gutter="8">
      <el-col
        v-for="(brand, index) in module.props.brands"
        :key="index"
        :span="6"
        class="brand-col"
      >
        <el-card :body-style="{ padding: '8px' }" class="brand-card">
          <img
            :src="brand.logo"
            alt="brand.name"
            class="brand-image"
          />
          <div class="brand-name">{{ brand.name }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BrandRecommendModule',
  props: ['module'],
}
</script>

<style scoped>
.module-box {
  padding: 8px;
}

.module-title {
  margin: 6px 0 10px;
  font-size: 16px;
}

.brand-col {
  margin-bottom: 10px; /* 每个卡片底部留一点空间 */
}

.brand-card {
  padding: 0;
  box-shadow: none; /* 可选：去除阴影更简洁 */
}

.brand-image {
  width: 100%;
  display: block;
  margin-bottom: 4px;
}

.brand-name {
  text-align: center;
  font-size: 13px;
}
</style>
